<template>
  <view class="job-publish-new-page">
    <!-- 顶部导航栏 -->
    <view class="header-nav">
      <view class="nav-content">
        <text class="iconfont-v2 icon-jiantou back-btn" @click="goBack"></text>
        <text class="nav-title">发布职位</text>
        <view class="header-actions">
          <text class="iconfont-v2 icon-gengduo more-btn"></text>
          <text class="iconfont-v2 icon-yanjing view-btn"></text>
        </view>
      </view>
    </view>

    <!-- 表单内容 -->
    <view class="form-container">
      <!-- 职位类型选择 -->
      <view class="form-item" @click="goToJobCategory">
        <view class="item-content">
          <text class="item-label">请选择职位类型</text>
          <text class="iconfont-v2 icon-arrow-right"></text>
        </view>
      </view>

      <!-- 地理位置权限 -->
      <view class="form-item" @click="requestLocationPermission">
        <view class="item-content">
          <view class="location-info">
            <text class="iconfont-v2 icon-dingwei location-icon"></text>
            <text class="item-label">开启地理位置权限</text>
          </view>
          <text class="iconfont-v2 icon-arrow-right"></text>
        </view>
      </view>
    </view>

    <!-- 底部发布按钮 -->
    <view class="publish-button" @click="goToPublish">
      <text>去发布</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 页面数据
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    goToJobCategory() {
      uni.navigateTo({
        url: '/pages/bussiness/job-category'
      });
    },
    requestLocationPermission() {
      uni.showModal({
        title: '位置权限',
        content: '需要获取您的位置信息来推荐附近的职位',
        success: (res) => {
          if (res.confirm) {
            uni.getLocation({
              type: 'wgs84',
              success: (location) => {
                uni.showToast({
                  title: '位置获取成功',
                  icon: 'success'
                });
              },
              fail: () => {
                uni.showToast({
                  title: '位置获取失败',
                  icon: 'none'
                });
              }
            });
          }
        }
      });
    },
    goToPublish() {
      uni.navigateTo({
        url: '/pages/bussiness/job-publish'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.job-publish-new-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 顶部导航栏 */
.header-nav {
  background: white;
  padding: 20rpx 30rpx;
  padding-top: calc(20rpx + env(safe-area-inset-top));
  border-bottom: 2rpx solid #f0f0f0;
  
  .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .back-btn {
      font-size: 32rpx;
      color: #333;
      cursor: pointer;
    }
    
    .nav-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }
    
    .header-actions {
      display: flex;
      align-items: center;
      gap: 20rpx;
      
      .more-btn,
      .view-btn {
        font-size: 32rpx;
        color: #666;
        cursor: pointer;
        
        &:hover {
          color: #333;
        }
      }
    }
  }
}

/* 表单容器 */
.form-container {
  background: white;
  margin: 20rpx 30rpx;
  border-radius: 24rpx;
  overflow: hidden;
  
  .form-item {
    padding: 32rpx 30rpx;
    border-bottom: 2rpx solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:hover {
      background: #f8f9fa;
    }
    
    .item-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .item-label {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
      
      .location-info {
        display: flex;
        align-items: center;
        gap: 12rpx;
        
        .location-icon {
          font-size: 32rpx;
          color: #ED6567;
        }
      }
      
      .iconfont-v2 {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

/* 底部发布按钮 */
.publish-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #ED6567;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background: #d55a54;
  }
  
  &:active {
    transform: scale(0.98);
  }
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .form-container {
    margin: 20rpx 24rpx;
  }
  
  .header-nav {
    padding: 20rpx 24rpx;
    padding-top: calc(20rpx + env(safe-area-inset-top));
  }
}
</style>

